草庐IT

DOM 封装

全部标签

Vue3+TS封装axios

1.实现最基础的封装将其封装为一个类,而不是一个函数的原因是因为类可以创建多个实例,适用范围更广,封装性更强一些。index.ts //index.tsimportaxiosfrom'axios'importtype{AxiosInstance,AxiosRequestConfig}from'axios'classZJRequest{//axios实例//定义一个axion实例属性instance:AxiosInstance//利用构造函数要求传入使用ZJRequest类时传入参数constructor(config:AxiosRequestConfig){//把axios实例赋给instan

vue3 + naive组件UI 运用h()函数和封装的svg组件动态创建svg图片

naive组件UI有些组件自定义图标需要用到h()函数 但有时候,我们只想用自己本地的svg图片,就需要运用h()函数来创建组件的方式动态创建svg了具体代码如下:importSvgIconfrom'@/components/svgIcon/svgIcon.vue'import{h}from'vue'functionrenderIcon(){ return()=>  h('div',[   h(SvgIcon,{    name:'wind'   })  ])}   动态创建svg   这里的'wind'是你本地svg图片的名称,具体可以看下面的文章SvgIcon组件是封装好的组件,可以在网上

javascript - 在 Android 4.4 Webview 中使用 shadow-dom (Polymer)

实际上,我正在使用自定义Polymer元素(基于web-components和shadow-dom)构建一个web应用程序,但我遇到了一个严重的问题。我希望此应用程序在Android4.4WebView上运行,但在WebView上测试该应用程序时,我遇到了一些shadow-dom问题,尽管它在Chrome(Android和桌面)上运行良好。当我尝试从CSS(使用::shadow或/deep/)或从纯js访问shadowRoot元素时,会出现此问题。这是我的问题的简单说明:somecontentPolymer('custom-elt',{getElt:function(){returnt

贴片功率电感封装尺寸与性能

贴片功率电感最常用的规格尺寸有:CD32/CD43/CD54/CD75/CD105贴片功率电感封装尺寸图:封装规格尺寸(LxWxH)电感量额定电流CD313.5x3.0x1.6mm0.33uH~390uH0.13~0.45ACD323.5x3.0x2.1mm1uH~680uH0.1~2.2ACD424.5x4.0x2.1mm2.2uh~330uh0.1~2ACD434.5x4.0x3.2mm1uH~1000uH0.08~3ACD525.8x5.2x2.1mm2.2uH~220uH0.25~2.4ACD535.8x5.2x3.0mm1.5uH~1000uH0.14~3.1ACD545.8x5.2

vue3 使用ref 获取 dom 元素的高度

代码实现:import{ref,onMounted}from'vue'constmains=ref()onMounted(()=>{constheight=mains.value.clientHeightconsole.log(height,1234)}).search{width:100px;height:100px;margin:0auto;background-color:greenyellow;}输出结果: 

python接口自动化封装导出excel方法和读写excel数据

一、首先需要思考,我们在页面导出excel,用python导出如何写入文件的封装前需要确认python导出excel接口返回的是一个什么样的数据类型如下:我们先看下不对返回结果做处理,直接接收数据类型是一个对象,无法获取返回值此时我们需要对返回数据做处理,如下;response.text#响应文本数据(字符串)把返回的数据类型变成了dict,response.json()**这样就方便我们按照字典的操作去拿数据**但是我们现在的操作是要获取导出文件的数据,导出excel是一个二进制文件:response.content#响应返回的内容(二进制)接下来我们按思路response.content方

全屏API及vue3 hook封装

最近在一个大屏项目遇到一个需求:用户可以通过一个按钮,触发页面部分模块全屏。通过以下API可以实现:Element.requestFullscreen()方法用于发出异步请求使元素进入全屏模式。且全屏状态变化会触发以下事件:fullscreenchange事件会在浏览器进入或退出全屏模式后立即触发。基于以上API和事件,封装了一个简单的全屏hook:响应式的全屏状态可以指定元素进入/退出全屏模式import{onMounted,onUnmounted,ref}from"vue";exportdefaultfunctionuseFullScreen(){//响应式全局状态constisFullS

一个基于Kafka客户端封装的工具,Kafka开发效率神器

GitHub源码https://github.com/zhangchuangiie/SimpleKafkaSimpleKafka(Kafka客户端封装工具类)一个基于Kafka客户端封装的工具,Kafka开发效率神器特点:封装了常用的Kafka客户端操作,无需维护配置,无需初始化客户端,真正实现了一行代码调用将连接池的维护封装在工具类里面,多线程使用也无需维护客户端集合使用方式:只需要集成1个KafkaUtil.java文件即可,修改里面的kafka服务地址即可典型示例:同步生产: LinkedHashMaprecordMeta=KafkaUtil.sendToKafka("RULEa9330

〖大前端 - 基础入门三大核心之JS篇㊱〗- JavaScript 的DOM节点操作

说明:该文属于大前端全栈架构白宝书专栏,目前阶段免费,如需要项目实战或者是体系化资源,文末名片加V!作者:不渴望力量的哈士奇(哈哥),十余年工作经验,从事过全栈研发、产品经理等工作,目前在公司担任研发部门CTO。荣誉:2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。🏆白宝书系列🏅启示录-攻城狮的自我修养🏅Python全栈白宝书🏅ChatGPT实践指南白宝书🏅产品思维训练白宝书🏅全域运营实战白宝书🏅大前端全栈架构白宝书文章目录⭐节点操作🌟节点的创建、移除、克隆✨节点的创建✨节点创建操作实例✨节点的移动✨节点的删除✨节点的克隆⭐